<template>
  <div class="role-index">
    <!-- type 颜色 -->
    <el-button icon="el-icon-circle-plus-outline"
      @click="add"
    >添加</el-button>
    <v-list @edit="editRole"></v-list>
    <v-info :info="info" ref="info"></v-info>
  </div>
</template>

<script>
import vList from "./list";
import vInfo from "./info";
export default {
  data() {
    return {
      info:{
        isShow:false,
        isAdd:false
      }
    };
  },
  components: {
    vList,
    vInfo,
  },
  methods:{
    add(){
      // 打开添加的弹窗
      this.info.isAdd=true;
      this.info.isShow=true;
      // 在父组件中调用子组件的方法
      this.$refs.info.getList();
      },
      editRole(val){
        // 在父组件中调用子组件的方法
        this.$refs.info.setStatus({...val});
        this.info.isAdd=false;
        this.info.isShow=true;
    }
  }
};
</script>

<style>
/* 覆盖element的样式  首先检查元素找到元素的class名 使用组件根元素的class名作为父级 */
.role-index .el-button.el-button--default {
  background-color: #fb6d49;
  color: #fff;
}
</style>